<template>
  <!-- 托育账单页 -->
  <div class="nurseryBillPage">
    <div class="search-wrap d-flex a-center">
      <div class="search-item d-flex a-center m-l20">
        <label>项目名称</label>
        <el-input
          v-model="searchFormData.projectName"
          class="m-l5"
          placeholder="请输入项目名称"
        ></el-input>
      </div>
      <div class="search-item d-flex a-center m-l20">
        <label>服务类型</label>
        <el-select class="m-l10" v-model="searchFormData.serviceType" clearable>
          <el-option
            v-for="(item, index) in serviceTypeOptionsArr"
            :key="index"
            :label="item"
            :value="item == '全部' ? '' : item"
          ></el-option>
        </el-select>
      </div>
      <div class="search-item d-flex a-center m-l20">
        <label>费用类型</label>
        <el-select class="m-l10" v-model="searchFormData.payType" clearable>
          <el-option
            v-for="(item, index) in expenseTypeOptionsArr"
            :key="index"
            :label="item"
            :value="item == '全部' ? '' : item"
          ></el-option>
        </el-select>
      </div>
      <div class="search-buttons m-l50">
        <el-button color="#fc702b" style="color: #fff" @click="onQuery"
          >查询</el-button
        >
        <el-button color="#f0f0f0" style="color: #000" @click="onReset"
          >重置</el-button
        >
        <el-divider direction="vertical" class="dividerStyle" />
        <el-button @click="download" class="button_edit m-r10">模版下载</el-button>
         <el-button class="button_edit" @click="onImport">导入</el-button>
        <el-button class="button_edit" @click="onExport">
          <svg-icon
            icon-class="project-detail-icon-derive"
            class="icon-export m-r5"
          ></svg-icon>
          一键导出
        </el-button>
      </div>
    </div>
    <public-table
      class="nurseryBillTable m-t20"
      :page="page"
      :tableData="tableData"
      :tableOption="tableOption"
      @page-change="onPageChange"
    ></public-table>
  </div>
  <!-- 导入excel   -->
    <public-dialog
            :title="'导入养老食堂账单数据'"
            :width="'40%'"
            :confirmButtonTitle="'确认'"
            v-model:visible="visible"
            @onConfirm="onConfirm"
    >
        <div class="public-dialog-content d-flex flex-column">
            <el-upload
                    ref="uploadRef"
                    class="upload-demo"
                    drag
                    action="#"
                    multiple
                    :http-request="uploadFile"
            >
                <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                <div class="el-upload__text">
                    将文件拖到此处或<em>点击上传</em>
                </div>
            </el-upload>
        </div>
    </public-dialog>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import {
    ElSelect,
    ElOption,
    ElDivider,
    ElLoading,
    ElMessage, ElUpload,
} from "element-plus";
import {exportExcelFile, limitInputNum} from "@/common/utils/GlobalUtils";
import PublicTable from "@/components/PublicTable.vue";
import { tableCommonFun } from "@/hooks/tableCommon";
import {nurseryApi, retirementApi} from "@/api/businessFinance";
import {
  serviceTypeOptionsArr,
  expenseTypeOptionsArr,
} from "@/common/dict/dictCollect";
import PublicDialog from "@/components/PublicDialog.vue";
import {UploadFilled} from "@element-plus/icons-vue";

// =========== table相关参数 ===========
// 查询table调用接口
const interfaceConfig = reactive({
  fileName: "businessFinance",
  apiPath: "nurseryApi.getBfFinanceDepositChildPage",
});
const exportConfig = reactive({
  fileName: "businessFinance",
  apiPath: "nurseryApi.exportBfFinanceDepositChild",
  tableName: "托育账单明细表",
});
const {
  form: searchFormData,
  page,
  tableOption,
  tableData,
  onQuery,
  onReset,
  onPageChange,
  getData,
  onExport,
} = tableCommonFun(interfaceConfig, exportConfig);
// 列配置
tableOption.value = [
  { label: "项目名称", prop: "park", minWidth: 100, align: "center" },
  { label: "幼儿姓名", prop: "childName", minWidth: 100, align: "center" },
  { label: "入园时间", prop: "entryTime", minWidth: 100, align: "center" },
  { label: "缴费金额", prop: "payPrice", minWidth: 100, align: "center" },
  { label: "入园类型", prop: "entryType", minWidth: 100, align: "center" },
  { label: "保教费标准(或每次价格)(元)", prop: "secureEduPrice", minWidth: 200, align: "center" },
  { label: "伙食费标准(元)", prop: "boardPrice", minWidth: 150, align: "center" },
  { label: "本月保教费计费天数(或次数)", prop: "monthSecureEduNumber", minWidth: 210, align: "center" },
  { label: "本月伙食费计费天数", prop: "monthBoardNumber", minWidth: 150, align: "center" },
  { label: "本月实际保教费(元)", prop: "monthRealSecureEduPrice", minWidth: 150, align: "center" },
  { label: "本月实际伙食费(元)", prop: "monthRealBoardPrice", minWidth: 150, align: "center" },
  { label: "本月实际床品费(元)", prop: "beddingFee", minWidth: 150, align: "center" },
  { label: "财务录入保教费", prop: "financeSecureEduPrice", minWidth: 150, align: "center" },
  { label: "财务录入伙食费", prop: "financeBoardPrice", minWidth: 150, align: "center" },
  { label: "缴费时间", prop: "paymentTime", minWidth: 150, align: "center" },
];

// 给table各项数据添加 isEditFlag 属性，用于判断是否为编辑状态
const postTabelData = ref([
  // {
  //   id: "123456",
  //   depositChildId: "111",
  //   projectName: "防静电科技",
  //   childName: "刘胜男",
  //   childIdCard: "544789200015544782",
  //   serviceType: "全日托(小时)",
  //   payDate: "2020-6-12",
  //   payType: "伙食费",
  //   payStandards: "500.22",
  //   bankPrepaid: "200.36",
  //   balanceShift: "111.32",
  //   singleSingle: "233.36",
  //   reckonAllMoney: "2.36",
  //   reckonAllPeriod: "4.23",
  //   // --输入框--
  //   monthConfirmPeriod: "12.35",
  //   monthConfirmIncome: "455.23",
  //   monthExitPeriod: "0.00",
  //   monthExitMoney: "0.00",
  //   upConfirmPeriod: "12.36",
  //   upConfirmMoney: "55.63",
  //   residuePeriod: "76.32",
  //   whetherTransfer: "否",
  //   transferWay: "森岛帆高",
  //   transferMoney: "25.13",
  //   whetherSettle: "是",
  //   balancePeriod: "10.34",
  // }
]);
const changeTableData = () => {
 /* postTabelData.value = getTableData.value.map((n, i) => {
    n.isEditFlag = false;
    return n;
  });*/
  console.log("转换后的数据", postTabelData.value);
};

// =============== 查询条件 ================
searchFormData.value = {
  projectName: "",
  serviceType: "",
  payType: "",
};
const doEdit = (row) => {
  row.isEditFlag = true;
};
// 保存
const saveDisFlag = ref(false)
const doSave = (row) => {
  saveDisFlag.value = true
  nurseryApi.editBfFinanceDepositChildSave(row).then((res) => {
    const { code, data } = res;
    if (code == 200) {
      row.isEditFlag = false;
      ElMessage.success("编辑成功!");
      saveDisFlag.value = false
    } else {
      ElMessage.error("编辑出错，请重试");
      saveDisFlag.value = false
    }
  });
}

/**
 * 模版下载
 */
const download = () => {
    nurseryApi.templateDownload_nursery().then(res=>{
        if(res){
            exportExcelFile(res,'托育账单模版');
        }
    });
}

/**
 * 导入托育账单
 */
const visible = ref(false);
const onImport = () => {
    visible.value = true;
}

/**
 * 导入确认
 */
const onConfirm = () => {

}

/**
 * 上传方法
 */
const uploadFile = (file) => {
    const loading = ElLoading.service({
        lock: true,
        text: "Loading",
        background: "rgba(0, 0, 0, 0.7)",
    });
    let uploadFile = new FormData();
    uploadFile.append("file", file.file);
    nurseryApi.importExcel_depositChild(uploadFile).then(res=>{
        if (res.code === '200') {
            loading.close();
            ElMessage.success("上传成功!");
            visible.value = false;
            onQuery();
        }else{
            loading.close();
            ElMessage.error("上传失败!请联系管理员。");
        }
    });
}

onMounted(() => {
  onQuery();
  changeTableData();
});
</script>
<style lang="scss" scoped>
.nurseryBillPage {
  .search-wrap {
    .search-item {
      .el-input {
        width: auto !important;
      }
    }
    .search-buttons {
      .dividerStyle {
        height: 40px;
        margin: 0 15px;
      }
      .icon-export {
        width: 18px;
        height: 18px;
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.nurseryBillPage {
  .nurseryBillTable {
    .table-content {
      :deep(.el-table) {
        .el-table__body {
          .el-table__row {
            .el-table__cell {
              .el-input {
                .el-input__wrapper {
                  .el-input__inner {
                    text-align: center;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
